<template>
	<view class="pages-refund">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="申请售后" leftIcon="icon-left"
			color="#ffffff" :backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		<view class="flex-between pd-lg radius-16 fill-base ml-md mr-md mt-md" v-for="(item,index) in orderInfo.order_goods" :key="index">
			<image :src="item.image" mode="aspectFill" class="radius-16 order-image"></image>
			<view class="flex-1 pl-md">
				<view class="f-title text-bold">{{item.name}}</view>
				<view class="f-caption c-caption pt-sm pb-sm">{{item.title}}</view>
				<view class=" c-warning f-paragraph">￥{{item.price}}</view>
			</view>
		</view>
		<view class="pl-lg pr-lg radius-16 fill-base ml-md mr-md pb-sm mt-md pb-lg">
			<view class="pt-lg pb-lg flex-between">
				<text class="f-mini-title text-bold c-mini-title">退款金额</text>
				<text class="c-warning f-mini-title text-bold">￥{{orderInfo.pay_price}}</text>
			</view>
			<view class="c-caption f-desc">1-3个工作日退还至原支付方，以实际退款金额为准</view>
		</view>
		<view class="pl-lg pr-lg radius-16 fill-base ml-md mr-md pb-sm mt-md pb-lg">
			<view class="pt-lg pb-lg">
				<text class="f-mini-title c-warning">*</text>
				<text class="f-mini-title text-bold c-mini-title">退款原因</text>
			</view>
			<view class="pt-sm flex-y-center" style="padding-bottom: 36rpx;" v-for="(item,index) in refundList" :key="index" @tap="contentChange(index)">
				<i class="iconfont icon-radio-fill" style="font-size: 20px;" :style="{color: primaryColor}" v-if="current == index"></i>
				<i class="iconfont icon-xuanze" style="font-size: 20px;color: #BEC3CE;" v-if="current != index"></i>
				<text class="pl-lg f-paragraph c-paragraph">{{item}}</text>
			</view>
			<view class="pt-lg pb-lg">
				<text class="f-mini-title text-bold c-mini-title">退款详细描述</text>
			</view>
			<view class="textarea-box radius-16">
				<textarea v-model="param.text" class="item-textarea pd-lg f-paragraph c-title"
					:class="[{'text-bold':param.text}]" maxlength="300" placeholder="请输入"
					placeholder-class="c-caption" />
				<view class="text-right f-paragraph pb-lg pr-lg" style="color:#C8CDD3">
					{{param.text.length>300?300:param.text.length}}/300
				</view>
			</view>
		</view>
		
		
		<fix-bottom-button @confirm="submit" borderRadius="8rpx" :text="[{text:'确认提交',type:'confirm',isAuth:false}]"
			bgColor="#fff">
		</fix-bottom-button>
		<view class="space-max-footer"></view>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	
	export default {
		data() {
			return {
				refundList: [ '计划有变', '系统无人接单', '上门后补差价协商不一致', '服务不满意', '其他'],
				options: {},
				param:{
					order_id: '',
					content: '其他',
					text: ''
				},
				orderInfo: {},
				current: 4
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
		}),
		async onLoad(options) {
			this.$util.showLoading()
			this.options = options
			this.param.order_id = options.id
			this.initIndex()
		},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false){
				if(!this.configInfo.id || refresh){
					this.getConfigInfo()
				}
				this.getOrderInfo()
			},
			async getOrderInfo(){
				let data = await this.$api.order.orderInfo(this.options)
				this.orderInfo = data
				this.$util.hideAll()
			},
			contentChange(index){
				this.current = index
				this.param.content = this.refundList[index]
			},
			async submit(){
				try{
					await this.$api.order.applyRefund(this.param)
					this.$util.showToast({
						title: `提交成功`
					})
					setTimeout(()=> {
						this.$util.back()
						this.$util.goUrl({url: 1 ,openType: 'navigateBack'})
					},1500)
				}catch(e){
					//TODO handle the exception
				}
			}
		},
	}
</script>


<style lang="scss">
	.pages-refund {
		.order-image{
			width: 160rpx;
			height: 160rpx;
		}
		.c-mini-title{color: #4A4A4A;}
		.textarea-box {
			width: 660rpx;
			background: #F7F8FA;
		
			.item-textarea {
				color: #333;
				height: 280rpx;
			}
		}
	}
</style>
